<template>
  <main>
    <div class="require-container">
      <div class="require-title">
        <span style="font-weight: 600; margin-left: 20px; margin-right: 20px">
          中标详情页面
        </span>
      </div>
      <div class="require-body">
        <h4>采购需求</h4>
        <div class="form-content">
          <el-form
            :rules="rules"
            ref="ruleForm"
            label-position="right"
            label-width="90px"
            :model="form"
          >
            <el-form-item label="需求类型" prop="reqType">
              <el-input :disabled="true" v-model="form.reqType"></el-input>
            </el-form-item>
            <el-form-item label="项目名称" prop="proName">
              <el-input :disabled="true" v-model="form.proName"></el-input>
            </el-form-item>
            <el-form-item label="工程类型" prop="proType">
              <el-input :disabled="true" v-model="form.proType"></el-input>
            </el-form-item>
            <el-form-item label="工程编码">
              <el-input :disabled="true" v-model="form.proCode"></el-input>
            </el-form-item>
            <el-form-item label="采购类别">
              <el-input :disabled="true" v-model="form.bugType"></el-input>
            </el-form-item>
            <el-form-item label="估算价格">
              <el-input :disabled="true" v-model="form.prePrice"></el-input>
            </el-form-item>
            <el-form-item label="采购范围">
              <el-input :disabled="true" v-model="form.buyRange"></el-input>
            </el-form-item>
            <el-form-item label="工期需求">
              <el-input :disabled="true" v-model="form.timeReq"></el-input>
            </el-form-item>
            <el-form-item label="供应商需求">
              <el-input :disabled="true" v-model="form.busReq"></el-input>
            </el-form-item>
            <el-form-item label="需求原因">
              <el-input :disabled="true" v-model="form.reqCause"></el-input>
            </el-form-item>
          </el-form>
          <div class="clear"></div>
        </div>
      </div>
      <div
        class="require-body"
        v-for="(item, index) in form.company"
        :key="index"
      >
        <h4>投标企业</h4>
        <div class="form-content">
          <el-form label-position="right" label-width="100px" :model="form">
            <el-form-item label="企业名称">
              : {{ item || "阿里巴巴" }}
            </el-form-item>
            <el-form-item>
              <a
                class="shadow-button shiny"
                v-if="!!form.fileList[item]"
                :href="[form.fileList[item]]"
                target="_blank"
                :download="[form.fileList[item]]"
                >下载附件</a
              >
            </el-form-item>
          </el-form>
          <div class="clear"></div>
        </div>
      </div>
      <div class="require-body">
        <h4>评委详情</h4>
        <div class="form-content">
          <el-form label-position="right" label-width="100px" :model="form">
            <el-form-item label="资历评分">
              : {{ form.expScore || 5 }}
            </el-form-item>
            <el-form-item label="投标价格评分">
              : {{ form.bidPriceScore || 5 }}
            </el-form-item>
            <el-form-item label="执行方案评分">
              : {{ form.executeScore || 5 }}
            </el-form-item>
          </el-form>
          <div class="clear"></div>
          <button
            class="shadow-button shiny"
            style="text-align: center; margin-top: 20px"
            @click="toScore()"
          >
            进行中标
          </button>
        </div>
      </div>
    </div>
  </main>
</template>

<script>
import { winBidRequirement, getReqById } from "api/require.api";
import { uploadFile, getUploadFile } from "api/modules/bid.api";

export default {
  name: "BitDetail",
  data() {
    return {
      form: {
        id: "",
        reqType: "",
        proName: "",
        proType: "",
        proCode: "",
        bugType: "",
        prePrice: "",
        buyRange: "",
        timeReq: "",
        busReq: "",
        reqCause: "",
        bidCompany: [],
        fileList: [],
      },
      scoreForm: {
        expScore: 0,
        bidPriceScore: 0,
        executeScore: 0,
      },
      rules: {
        reqType: [{ required: true, message: "请输入内容", trigger: "blur" }],
        proType: [{ required: true, message: "请输入内容", trigger: "blur" }],
        proName: [{ required: true, message: "请输入内容", trigger: "blur" }],
      },
    };
  },
  computed: {
    getCompany() {
      const ARr = new Set();
      this.form.company.forEach((v) => ARr.add(v));
      let newsarray = [...ARr];
      return newsarray.join("  、  ");
    },
  },
  created() {
    this.form = { ...this.form, ...getReqById(this.$route.query.id).data };
    if (!this.form.company) {
      this.form.company = ["阿里巴巴", "米哈游"];
    }
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    getId() {
      return new Date().getTime();
    },
    downloadFile() {
      console.log("下载文件");
    },
    toScore() {
      winBidRequirement(this.form);
      this.$message.success("中标成功");
      setTimeout(() => {
        this.$router.push({
          path: "winBidList",
        });
      }, 0);
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style lang="less" scoped>
.require-container {
  margin: 0 auto;
  max-width: 80vw;
  padding: 20px;
  ::v-deep {
    .el-form-item {
      width: 40%;
      float: left;
      &__content {
        width: 50%;
      }
    }
  }
  .require-title {
    padding: 20px;
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 20px;
    background-color: #fff;
  }
  .clear {
    clear: both;
  }
  .require-body {
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 30px;
    background-color: #fff;
  }
  .form-content {
    margin-left: 80px;
    margin-top: 50px;
  }
}
h4 {
  margin-left: 20px;
}
</style>